<template>
    <div class="main">
        <h3>
            个人信息
        </h3>
        <div class="title" v-if="formInline.true_name != null">
            <span>真实姓名:&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>{{formInline.true_name}}</span>
        </div>
        <hr />
        <div class="title" v-if="formInline.username != null">
            <span>用户名:&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>{{formInline.username}}</span>
        </div>
        <hr />
        <div class="title" v-if="formInline.phone != null">
            <span>手机号:&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>{{formInline.phone}}</span>
        </div>
        <hr />
        <div v-if="formInline.role != null">
            <span>角色:</span>
            <ul v-for="(val,key) in formInline.role">
                <li>{{val.name}}</li>
            </ul>
            <hr />
        </div>
        <div v-if="formInline.dep != null">
            <span>部门:</span>
            <ul v-for="(val,key) in formInline.dep">
                <li>{{val.name}}</li>
            </ul>
            <hr />
        </div>

    </div>
</template>
<script>
    export default {
        data(){
            return {
                formInline:{}
            }
        },
        mounted(){
            // 加载用户信息 user/userInfo
            this.loading(true)
            $.post("/user/userInfo",Response => {
                if(Response.success){
                    // this.options = Response.data;
                    this.loading(false)
                    // console.log(formInline)
                    this.formInline = (Response.data || [])
                    console.log(this.formInline)
                    // this.$message.success('保存成功');
                }else{
                    this.$message.error(Response.errMessage);
                }
                // console.log(Response)
            })
        },
        methods:{
            loading(bool = true) {

                const loading = this.$loading({
                    lock: true,
                    text: '',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                if(!bool){
                    loading.close();
                }
            }
        }
    }
</script>
<style scope lang="less">
    .main{
        padding:20px;
        .title{
            /*border-bottom:1px solid #e9e9e9;*/
        }
        hr{
            background-color:#e9e9e9;
            height:1px;border:none;
        }
    }
</style>